<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="18"><h2 style="color: coral">欢迎访问后台管理系统</h2></el-col>
      <el-col :span="4"><el-button style="margin-left: 100%" type="primary" round @click="personal">个人中心</el-button></el-col>
    </el-row>
    <el-divider content-position="right"></el-divider>

<!--    数据情况概述-->
    <el-row :gutter="20">
      <el-col :span="22">
        <el-card class="box-card" shadow="always">
          <div>
            <div slot="header" class="clearfix">
              <span>数据概况</span>

              <el-divider content-position="right"></el-divider>
            </div>
            <div style="text-align: center">
              <el-col :span="2">
                <div>
                  <h5>未租用</h5>
                  <h2 v-text="unbusy"></h2>
                </div>
              </el-col>
              <el-col :span="2">
                <div>
                  <h5>已租用</h5>
                  <h2 v-text="busy"></h2>
                </div>
              </el-col>
              <el-col :span="3">
                <div>
                  <h5>全部摊位</h5>
                  <h2 v-text="booth"></h2>
                </div>
              </el-col>
              <el-col :span="2">
                <div>
                  <el-divider direction="vertical"></el-divider>
                </div>
              </el-col>
              <el-col :span="3">
                <div>
                  <h5>客户总数</h5>
                  <h2 v-text="customers"></h2>
                </div>
              </el-col>
              <el-col :span="3">
                <div>
                  <h5>本月新增</h5>
                  <h2 v-text="newCustome"></h2>
                </div>
              </el-col>
              <el-col :span="2">
                <div>
                  <el-divider direction="vertical"></el-divider>
                </div>
              </el-col>
              <el-col :span="6">
                <div>
                  <h5>总收入</h5>
                  <h2 v-text="tpayment"></h2>
                </div>
              </el-col>
<!--              <el-col :span="3">
                <div>
                  <h5>昨日收款</h5>
                  <h2 v-text="ypayment"></h2>
                </div>
              </el-col>-->
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-divider content-position="right"></el-divider>

<!--    快捷入库栏-->
    <el-row :gutter="20" class="shortcuts">
      <el-col :span="22">
        <el-card class="box-card" shadow="always">
          <div>
            <div slot="header" class="clearfix">
              <span>快捷入库</span>
              <el-divider content-position="right"></el-divider>
            </div>
            <div style="text-align: center" v-for="item in menuList">
              <el-col :span="6" v-if="item.name=='基础管理'">
                <div>
                  <h1 class="el-icon-office-building"></h1>
                  <h3>
                    <a v-if="item.name=='基础管理'" @click="goMarket">市场管理</a>
                  </h3>
                </div>
              </el-col>
              <el-col :span="6" v-if="item.name=='基础管理'">
                <div>
                  <h1 class="el-icon-film"></h1>
                  <h3>
                    <a v-if="item.name=='基础管理'" @click="goRent">摊位管理</a>
                  </h3>
                </div>
              </el-col>
              <el-col :span="6" v-if="item.name=='租赁管理'">
                <div>
                  <h1 class="el-icon-document"></h1>
                  <h3>
                    <a v-if="item.name=='租赁管理'" @click="goRentList">订单管理</a>
                  </h3>
                </div>
              </el-col>
              <el-col :span="6" v-if="item.name=='用户管理'">
                <div>
                  <h1 class="el-icon-postcard"></h1>
                  <h3>
                    <a v-if="item.name=='用户管理'" @click="goUserList">用户管理</a>
                  </h3>
                </div>
              </el-col>


            </div>
          </div>

        </el-card>
      </el-col>
    </el-row>
    <el-divider content-position="right"></el-divider>

<!--    地图显示功能-->
    <el-row :gutter="20">
        <h3>摊位位置示意：</h3>
      <el-col :span="22">
        <div style="height: 400px;width: 100%">
          <map-container></map-container>
        </div>
      </el-col>
    </el-row>

    <el-divider content-position="right"></el-divider>

    <el-row :gutter="20" class="shortcuts">
      <el-col :span="22">
          <div>
            <div style="text-align: center">
              <el-col :span="11">
                <div>
                  <h3>近七日客户图表：</h3>
                </div>
              </el-col>
              <el-col :span="13">
                <div>
                  <h3>近七日租金图表：</h3>
                </div>
              </el-col>
            </div>
          </div>

      </el-col>
    </el-row>
<!--    可视化统计图-->

    <el-row :gutter="20">
      <el-col :span="11">
        <div class="contetn">

          <div id="main" ref="chart1" style="width: 100%; height: 400px"></div>

        </div>
      </el-col>
      <el-col :span="11">
        <div class="contetn">

          <div id="main1" ref="chart2" style="width: 100%; height: 400px"></div>

        </div>
      </el-col>
    </el-row>
    <el-divider content-position="right"></el-divider>
    <el-dialog
        title="个人中心"
        :visible.sync="editDialogVisible"
        width="50%"
        @close="editManagerFormClose"
        :close-on-click-modal="false"
    >
      <el-form
          :model="editManagerForm"
          :rules="editManagerFormRules"
          ref="editManagerFormRef"
          label-width="100px"
          class="demo-ruleForm">
        <el-divider content-position="right"></el-divider>
        <el-form-item label="管理员名称" prop="name">
          <el-input v-model="editManagerForm.name"></el-input>
        </el-form-item>
        <el-form-item label="管理员电话" prop="cellphone">
          <el-input v-model="editManagerForm.cellphone"></el-input>
        </el-form-item>
        <el-form-item label="管理员密码" prop="password">
          <el-input type="password" v-model="editManagerForm.password"></el-input>
        </el-form-item>
        <el-form-item label="管理员邮箱" prop="email">
          <el-input v-model="editManagerForm.email"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="editManager">确 定</el-button>
                <el-button @click="editDialogVisible = false">取 消</el-button>
            </span>
    </el-dialog>
  </div>
</template>

<script>
import MapContainer from "@/component/MapContainer";
import * as echarts from "echarts";
export default {
  components:{MapContainer},
  name: "WelCome",
  data() {
    return {
      menuList:[],
      managerName:'',
      myClientChart: "",
      myRentChart: "",
      tpayment:0.00,
      newCustome:0,
      customers:0,
      unbusy:0,
      busy:0,
      booth:0,
      activeNames: ['0'],
      editDialogVisible: false,
      editManagerForm: {
        id: -1,
        name: "",
        cellphone:"",
        password:"",
        email:"",
        deptId:"",
        status:"",
        insertTime:"",
        isDelete:""
      },
      editManagerFormRules: {
        name: [
          {required: true, message: "名称不能为空", trigger: "blur"},
          { min: 3, max: 8, message: "用户名在3到8个字符之间", trigger: "blur" }
        ],
        cellphone: [
          {required: true, message: "手机号不能为空", trigger: "blur"}
        ],
        password: [
          {required: true, message: "密码不能为空", trigger: "blur"},
          { min: 3, max: 8, message: "用户密码在3到8个字符之间", trigger: "blur" }
        ],
        email: [
          {required: true, message: "邮箱不能为空", trigger: "blur"}
        ]
      },
    };
  },
  methods: {
    goMarket(){
      this.$router.push({
        path:'/market'
      })
    },
    goRent(){
      this.$router.push({
        path:'/rent'
      })
    },
    goRentList(){
      this.$router.push({
        path:'/rentList'
      })
    },
    goUserList(){
      this.$router.push({
        path:'/userList'
      })
    },
    handleChange(val){

    },
    editManager(){
      this.$refs.editManagerFormRef.validate(valid=>{
        if (!valid){
          return ;
        }
        let url = "/manager/modify";
        this.$axios.put(url,this.editManagerForm).then(res=>{
          console.log(res)
          if (res.data.code == 200){
            this.$message({
              type:"success",
              message:res.data.msg,
              duration:2000
            })
            this.editDialogVisible = false ;
            //this.$refs.editRoleFormRef.resetFields();
            this.$router.push({
              path:'/Login'
            })
          }else {
            this.$message({
              type:"error",
              message:res.data.msg,
              duration:1000
            })
          }
        });
      })
    },
    personal() {
      this.editDialogVisible = true;
    },
    editManagerFormClose() {
      this.editDialogVisible = false;
      this.$refs.editManagerFormRef.resetFields();
    },
    initManager() {
      let strUser = sessionStorage.getItem("managerInfo");
      let user = JSON.parse(strUser);
      this.editManagerForm = user;
      this.managerName = user.name;
    },
    initClient() {
      this.myClientChart = echarts.init(this.$refs.chart1);
      var option = {
        title: {
          text: "",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          data: ["短信营销", "市场传单", "直接访问", "抖音广告", "搜索引擎"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "短信营销",
            type: "line",
            stack: "总量",
            areaStyle: {},
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: "市场传单",
            type: "line",
            stack: "总量",
            areaStyle: {},
            data: [220, 182, 191, 234, 290, 330, 310],
          },
          {
            name: "直接访问",
            type: "line",
            stack: "总量",
            areaStyle: {},
            data: [150, 232, 201, 154, 190, 330, 410],
          },
          {
            name: "抖音广告",
            type: "line",
            stack: "总量",
            areaStyle: {},
            data: [320, 332, 301, 334, 390, 330, 320],
          },
          {
            name: "搜索引擎",
            type: "line",
            stack: "总量",
            label: {
              normal: {
                show: true,
                position: "top",
              },
            },
            areaStyle: {},
            data: [820, 932, 901, 934, 1290, 1330, 1320],
          },
        ],
      };
      this.myClientChart.setOption(option);
    },
    initRent() {
      this.myRentChart = echarts.init(this.$refs.chart2);
      var option = {
        title: {
          text: "",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
            legend: {
              data: ["中介费", "广告价格", "保证金", "租赁价格", "竞拍价格"],
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
            },
            xAxis: [
              {
                type: "category",
                boundaryGap: false,
                data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
              },
            ],
            yAxis: [
              {
                type: "value",
              },
            ],
            series: [
              {
                name: "中介费",
                type: "line",
                stack: "总量",
                areaStyle: {},
                data: [120, 132, 101, 134, 90, 230, 210],
              },
              {
                name: "广告价格",
                type: "line",
                stack: "总量",
                areaStyle: {},
                data: [220, 182, 191, 234, 290, 330, 310],
              },
              {
                name: "保证金",
                type: "line",
                stack: "总量",
                areaStyle: {},
                data: [150, 232, 201, 154, 190, 330, 410],
              },
              {
                name: "租赁价格",
                type: "line",
                stack: "总量",
                areaStyle: {},
                data: [1200, 1300, 1250, 1300, 1200, 1150, 1200],
              },
              {
                name: "竞拍价格",
                type: "line",
                stack: "总量",
                label: {
                  normal: {
                    show: true,
                    position: "top",
                  },
                },
            areaStyle: {},
            data: [4900, 5700, 6000, 5500, 3800, 4800, 5000],
          },
        ],
      };
      this.myRentChart.setOption(option);
    },
    initUnusedStall(){
      let url = "stall/showAllUnUsedStall";
      this.$axios.get(url)
          .then(res=>{
            console.log(res)
            if(res.data.code == 200){

              this.unbusy = res.data.data.length;
              this.busy =this.booth-this.unbusy;
            }else {
              this.$message({
                type:'error',
                message:res.data.msg,
                duration:1000
              })
            }
          })
    },
    initAllStall(){
      let url = "stall/showAllStall";
      this.$axios.get(url)
          .then(res=>{
            console.log(res)
            if(res.data.code == 200){

              this.booth = res.data.data.length;
              this.busy =this.booth-this.unbusy;

            }else {
              this.$message({
                type:'error',
                message:res.data.msg,
                duration:1000
              })
            }
          })
    },
    initAllUser(){
      let url = "user/showAllUser";
      this.$axios.get(url)
          .then(res=>{
            console.log(res)
            if(res.data.code == 200){
              this.customers=res.data.data.length;
              this.newCustome=this.customers-1;
            }else {
              this.$message({
                type:'error',
                message:res.data.msg,
                duration:1000
              })
            }
          })
    },
    initAllPayment(){
      let url = "rentOrder/showAllPayment";
      this.$axios.get(url)
          .then(res=>{
            console.log(res)
            if(res.data.code == 200){
              this.tpayment=res.data.data;
            }else {
              this.$message({
                type:'error',
                message:res.data.msg,
                duration:1000
              })
            }
          })
    },
    //初始化加载菜单  先查询所有菜单
    loadMenus() {
      let info = sessionStorage.getItem("managerInfo");
      let manager = JSON.parse(info);
      let url = "/permission/showMenuByManager/"+manager.id ;
      this.$axios.get(url)
          .then(res=>{
            if (res.data.code == 200){
              console.log(res);
              this.menuList = res.data.data;
              console.log(this.menuList);
            }else {
              this.$message({
                type:'error',
                message:res.data.msg,
                duration:1000
              })
            }
          })
    },
  },
  created() {
    this.initManager();
    this.initUnusedStall();
    this.initAllStall();
    this.initAllUser();
    this.initAllPayment();
    this.loadMenus();
  },
  mounted() {

    this.initClient();
    this.initRent();

    var self = this;

    window.onresize = self.myRentChart.resize;
    window.onresize = self.myClientChart.resize;

    window.addEventListener("resize", function() {

      self.myClientChart.resize();
      self.myRentChart.resize();

    });

  },
}
</script>

<style  scoped>
/deep/ .el-collapse-item__header{
  background-color:#EAEDF1;
  border: 1px solid deepskyblue;
  border-radius: 8%;
  font-size: 16px;
  padding-left:50px;
}
/deep/ .el-collapse-item__content{
  font-size: 18px;
  background-color: lightskyblue;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}
div h5{
  color: darkgrey;
}
div div div h2{
  color:limegreen;
}
.shortcuts{

}
div h1{
  font-size: 40px;
}
div span{
  font-size: 20px;
  font-family: "方正粗黑宋简体";
  color: dimgray;
}
div h3 a{
  cursor: pointer;
  color: cornflowerblue;
}
/*#container{
  padding:0px;
  margin: 0px;
  width: 100%;
  height: 100%;
}*/
</style>